Simple Rotating Effect Realized by Jquery [Examples]
- 2021-02-17 06:09:15
- OfStack
Simple Rotating Effect Realized by Jquery [Examples]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/index.css">
<script src="js/jquery-1.11.3.js"></script>
<script src="js/baner.js"></script>
</head>
<body>
<div class="main">
<a href=""><img src="img/baner-1.jpg" alt=""></a>
<a href=""><img src="img/baner-2.jpg" alt=""></a>
<a href=""><img src="img/baner-3.jpg" alt=""></a>
<a href=""><img src="img/baner-4.jpg" alt=""></a>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</body>
</html>
/************* Initialize the ************/
*{margin:0;padding: 0;border: none;list-style: none}
/********* Rotate left and right center *************/
.main{
width: 1024px;
height: 320px;
margin: 0 auto;
position: relative;
}
.main a{
position: absolute;
}
.main a img{
width: 100%;
height: 320px;
}
/*********** The little icon on the left ************/
.main ul li.selected{
background: #f97157;
}
.main ul{
position: absolute;
z-index: 999;
top: 120px;
left: 20px;
}
.main ul li{
width: 20px;
height: 20px;
border-radius: 50%;
background: #909090;
cursor: pointer;
text-align: center;
}
/**
* Created by Administrator on 16-3-12.
*/
/*********** Define global variables and timers *************/
var t=null;
var n=0;/** Dynamic change **/
var count;
/************************/
$(function(){
count=$(".main a").length;/* For dynamic change n The standby */
/** Let is not the first in rotation 1 A hidden **/
$(".main a:not(:first-child)").hide();
/* Click on the current li The current li The corresponding picture is displayed */
$(".main ul li").click(function(){
var index=$(this).text()-1;
n=index;
console.log(n);
/***** Let the currently displayed picture 0.5S Fade in and match down 1 A gradually show *****/
$(".main a").filter(":visible").fadeOut(500).parent().children().eq(index).fadeIn(1000);
/******* Focus, give to the present li Append class to change the background color *******/
$(this).addClass("selected");
/**** And remove the current li Class name of all siblings of selected , restore the background color *****/
$(this).siblings().removeClass("selected");
});
/*** Defining timer 3 Seconds to perform 1 time ****/
t=setInterval("autoMove()",3000);
/**** The timer stops when the mouse is in and turns on when it is removed ****/
$(".main").hover(function(){clearInterval(t)}, function(){t = setInterval("autoMove()", 3000);});
});
/*** Define the automatic rotation function ****/
function autoMove(){
if(n>=(count-1)){
n=0;
}else{
++n;
}
/***** to li Execute the matching event *****/
$(".main ul li").eq(n).trigger("click");
}